<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { Modal } from 'ant-design-vue'
import { t } from '@/libs/utils/i18n'
import Enums from '@/datas/Enums'

interface Props {
	open: boolean
}

interface Emits {
	(e: 'update:open', value: boolean): void
	(e: 'select', type: number): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

// 素材类型枚举
const materialTypes = [
	{
		value: Enums.goods.material.typeDatas.TEXT[0],
		label: Enums.goods.material.typeDatas.TEXT[1]
	},
	{
		value: Enums.goods.material.typeDatas.IMAGE[0],
		label: Enums.goods.material.typeDatas.IMAGE[1]
	},
	{
		value: Enums.goods.material.typeDatas.VIDEO[0],
		label: Enums.goods.material.typeDatas.VIDEO[1]
	}
]

// 选择素材类型
const handleSelectType = (type: number) => {
	emit('select', type)
	emit('update:open', false)
}

// 关闭弹框
const handleClose = () => {
	emit('update:open', false)
}

onMounted(() => {
	// 确保弹框显示
	if (props.open) {
		// 这里可以添加额外的初始化逻辑
	}
})
</script>

<template>
	<a-modal
		:open="open"
		:title="t('素材编辑.选择素材类型')"
		:footer="null"
		:closable="false"
		width="400px"
		@cancel="handleClose">
		<div class="p-4">
			<div class="space-y-2">
				<a-button
					v-for="type in materialTypes"
					:key="type.value"
					type="primary"
					block
					class="h-12 text-base"
					@click="() => handleSelectType(Number(type.value))">
					{{ type.label }}
				</a-button>
			</div>
		</div>
	</a-modal>
</template>
